import {Button, View, InputItem} from '@ant-design/react-native';
import React, {FC} from 'react';
import {KeyboardTypeOptions, StyleSheet} from 'react-native';
const InputButton: FC<{
  value: string;
  onChange: (key: string) => void;
  valid: () => void;
  title?: string;
  type?:
    | 'number'
    | 'text'
    | 'bankCard'
    | 'phone'
    | 'password'
    | 'digit'
    | KeyboardTypeOptions
    | undefined;
  disabled?: boolean;
}> = ({value, onChange, valid, title, type = 'number', disabled = false}) => {
  return (
    <View style={styles.input_button_box}>
      <View style={styles.input_Box}>
        <InputItem
          clear
          type={type}
          value={value}
          onChange={val => onChange(val)}
          labelNumber={3}
          placeholder="请输入验证码">
          {title}
        </InputItem>
      </View>
      <Button
        type="primary"
        disabled={disabled}
        style={{height: 36}}
        onPress={valid}>
        发送
      </Button>
    </View>
  );
};
const styles = StyleSheet.create({
  input_button_box: {
    display: 'flex',
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  input_Box: {
    flex: 1,
  },
});
export default InputButton;
